import { useEffect } from "react";
import "./index.css";
import $ from "../axios";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { setAct } from "../store/index";
import {
  ShopbagOutline,
  ReceiptOutline,
  TravelOutline,
  FolderOutline,
  UserAddOutline,
  FileWrongOutline,
  FillinOutline,
  FileOutline,
  RightOutline,
  SetOutline,
} from "antd-mobile-icons";
export default function Index() {
  const id = useSelector((data) => {
    return data.Myid;
  });
  const dispatch = useDispatch();
  let Navigate = useNavigate();
  useEffect(() => {
    getlist();
    if (!sessionStorage.getItem("token")) {
      Navigate("/Login");
      return;
    }
  }, []);
  const [data, setData] = useState({});
  let getlist = async () => {
    await $.post("/getMy", { id }).then((val) => {
      setData(val.data.data);
    });
  };
  let yaoqing = () => {
    Navigate("/Yao");
  };
  let huishou = () => {
    Navigate("/Hui");
  };
  let guize = () => {
    Navigate("/Gui");
  };
  let help = () => {
    Navigate("/Help");
  };
  return (
    <div style={{ margin: "20px" }}>
      {/* ----------用户信息------------ */}
      <div>
        <div>
          <div style={{ display: "flex" }}>
            <p style={{ width: "20%", marginRight: " 10px" }}>
              <img
                src={data.img}
                style={{
                  width: "100%",
                  borderRadius: "50%",
                }}
              />
            </p>
            <div>
              <p style={{ margin: "10px 0", fontSize: "26px" }}>{data.name}</p>
              <p>
                <span>关注{data.guanzhu}</span>
                <span style={{ margin: "20px" }}>粉丝{data.fensi}</span>
              </p>
            </div>
            <p
              style={{
                position: "relative",
                top: 55,
              }}
            >
              信誉分：{data.score}
            </p>
            <p
              style={{ position: "absolute", right: 20, fontSize: 40 }}
              onClick={() => {
                Navigate("/Set");
              }}
            >
              <SetOutline />
            </p>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              textAlign: "center",
              margin: "20px 0",
            }}
          >
            <div>
              <p>{data.beizan}</p>
              <p>被赞</p>
            </div>
            <div>
              <p>{data.uni}</p>
              尤尼币
            </div>
            <div>
              <p>￥{data.price}</p>
              <p>已赚</p>
            </div>
          </div>
        </div>
      </div>
      {/* ------------订单-------------- */}
      <div>
        <button
          style={{
            background: "none",
            border: "none",
            fontSize: "20px",
            margin: "20px 0",
          }}
          onClick={() => {
            Navigate("/Order");
          }}>
          我的订单
        </button>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            textAlign: "center",
          }}
        >
          <div
            onClick={() => {
              Navigate("/Order/Buy");
              dispatch(setAct("Buy"));
            }}
          >
            <ShopbagOutline style={{ fontSize: "40px" }} />
            <p>购买</p>
          </div>
          <div
            onClick={() => {
              Navigate("/Order/Sell");
              dispatch(setAct("Sell"));
            }}
          >
            <ReceiptOutline style={{ fontSize: "40px" }} />
            <p>卖出</p>
          </div>
          <div
            onClick={() => {
              Navigate("/Order/Send");
              dispatch(setAct("Send"));
            }}
          >
            <TravelOutline style={{ fontSize: "40px" }} />
            <p>发布</p>
          </div>
          <div
            onClick={() => {
              Navigate("/Order/Collection");
              dispatch(setAct("Collection"));
            }}
          >
            <FolderOutline style={{ fontSize: "40px" }} />
            <p>收藏</p>
          </div>
        </div>
      </div>
      {/* ------------功能-------------- */}
      <div>
        <div
          style={{ margin: " 20px 0", position: "relative" }}
          onClick={() => {
            yaoqing();
          }}>
          <UserAddOutline style={{ fontSize: "20px", marginRight: " 10px" }} />
          邀请得币
          <RightOutline style={{ position: "absolute", right: 10, top: 10 }} />
        </div>
        <div
          style={{ margin: " 20px 0", position: "relative" }}
          onClick={() => {
            huishou();
          }}
        >
          <FillinOutline style={{ fontSize: "20px", marginRight: " 10px" }} />
          回收分类
          <RightOutline style={{ position: "absolute", right: 10, top: 10 }} />
        </div>
        <div
          style={{ margin: " 20px 0", position: "relative" }}
          onClick={() => {
            guize();
          }}
        >
          <FileOutline style={{ fontSize: "20px", marginRight: " 10px" }} />
          平台规则
          <RightOutline style={{ position: "absolute", right: 10, top: 10 }} />
        </div>
        <div
          style={{ margin: " 20px 0", position: "relative" }}
          onClick={() => {
            help();
          }}
        >
          <FileWrongOutline
            style={{ fontSize: "20px", marginRight: " 10px" }}
          />
          帮助中心
          <RightOutline style={{ position: "absolute", right: 10, top: 10 }} />
        </div>
      </div>
    </div>
  );
}
